<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		    //1.Mutation	
					//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
					//Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
					        const store = new Vuex.Store({
								  state: {
								    count: 1
								  },
								  mutations: {
								    increment (state) {
								      // 变更状态
								      state.count++
								    }
								  }
							})
				   //要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：
				   			store.commit('increment')
				   			
		    //2.提交载荷（Payload）
		          //你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
		                    // ...
							mutations: {
							  increment (state, n) {
							    state.count += n
							  }
							}
							store.commit('increment', 10)
				  //在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
							// ...
							mutations: {
							  increment (state, payload) {
							    state.count += payload.amount
							  }
							}
							store.commit('increment', {
							  amount: 10
							})           
            //3.对象风格的提交方式
                  //提交 mutation 的另一种方式是直接使用包含 type 属性的对象：
		                    store.commit({
							  type: 'increment',
							  amount: 10
							})
		    //4.mutation 必须是同步函数。
		    
		    //5.在组件中提交mutation
		          //你可以在组件中使用 this.$store.commit('xxx') 提交 mutation
		                    const A = {
								template:'<div>组件A--count是{{count}}--doneTodosCount是{{doneTodosCount}}<button @click="addCount">count++</button></div>',
								computed:{
									count(){
										return this.$store.state.count
									},
									doneTodosCount(){
										//在任何组件中使用Getter
										return this.$store.getters.doneTodosCount
									}
								},
								methods:{
									addCount(){
										//在组件中提交mutation
										this.$store.commit({
											type:'increment',
											amount:1
										})
									}
								}
							};
			     //使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）
			                import { mapMutations } from 'vuex'
							export default {
							  // ...
							  methods: {
							    ...mapMutations([
							      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
							
							      // `mapMutations` 也支持载荷：
							      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
							    ]),
							    ...mapMutations({
							      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
							    })
							  }
							}
		</script>
	</body>
</html>
